<template>
  <ui-input :placeholder="placeholder" :toggle="false" :hide-icon="true" @click="chooseUser">
    <el-tag v-for="(v,i) in showList" :key="v.userId" size='mini' disable-transitions closable type='info' @close="close(i)">
      <el-tooltip class="item" effect="light" :content="v.email" placement="bottom">
        <span>
          <template v-if="isOpenData">
            <open-data type="userName" :openid="v.staffId"></open-data>
          </template>
          <template v-else>
            {{v.displayName}}
          </template>
        </span>
      </el-tooltip>
    </el-tag>
    
    <!-- 是否显示+num -->
    <el-tag v-if="moreNum>0" size='mini' disable-transitions :closable="false" type='info' @click="chooseUser">
      +{{moreNum}}
    </el-tag>
  </ui-input>
</template>

<script>
import UiInput from '@src/component/ui/UiInput/UiInput.tsx'
import { isOpenData } from '@src/util/platform';
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser/model/enum'
import i18n from '@src/locales';
const $t = i18n.t.bind(i18n);

export default {
  name: 'email-select-item',
  components:{
    UiInput
  },
  props:{
    selectedList:{
      type:Array,
      default:()=>[]
    },
    placeholder:{
      type:String,
      default: $t('common.base.pleaseSelect')
    },
    showMaxNum:{
      type:Number,
      default:1
    },
    updateTag:{
      type:Function,
      default:()=>{}
    }
    
  },
  data () {
    return {
      isOpenData
    }
  },
  computed:{
    showList(){
      let temp = this.selectedList.filter((v, i)=>{
        return i < this.showMaxNum
      })
      return temp
    },
    moreNum(){
      return this.selectedList.length - this.showMaxNum
    },
  },
  methods: {
    close(idx){
      let temp = this.selectedList.filter((v, i)=>i != idx)
      this.$emit('updateTag', temp)
    },
    // 选择人员
    /** 
     * FIXME: 选人组件
    */
    chooseUser() {  
      let options = {
        title: this.$t('common.placeholder.selectMember'), // [选填] 默认值为 '请选择人员'
        selectedUsers: this.selectedList,
        unique: false,
        max: -1,
        isNeedEmail: true,
        mode: BaseSelectUserModeEnum.Filter
      };
      this.$fast.select.multi.user(options).then(result => {
        console.log(result.data.users)
        if(result.status == 0){
          this.$emit('updateTag', result.data.users)
        }
      })
        .catch(err => console.error(err))
    },
  }
}
</script>

<style scoped lang='scss'>
    .el-tag{
      margin-right:10px;
    }
</style>